<template>
    <div class='body' v-loading="loading" element-loading-text="加载数据中..." :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
        <div class="main">
            <div class="top">

            </div>
            <div class="bom" v-if="tableData" style="font-size: 20px;padding-bottom: 50px;">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="id" label="账户id" width="180" />
                    <el-table-column prop="name" label="姓名" width="180" />
                    <el-table-column prop="age" label="年龄" width="180" />
                    <el-table-column prop="xing" label="性别" width="180" />
                    <el-table-column prop="qx" label="权限" width="180" />
                    <el-table-column prop="info" label="职位" width="180" />
                    <el-table-column align="right">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background @current-change="handleCurrentChange" v-model:current-page="currentPage4"
                    layout="prev, pager, next" :total="cons" />
            </div>
        </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="修改密码" direction="rtl" :before-close="handleClose">
        <span>你好, {{ usersdata.name }}!</span>
        <div>
            <div>
                <span>I&nbsp;&nbsp;&nbsp;D: </span>
                <el-input v-model="usersdata.id" style="width: 240px" disabled placeholder="ID" />
            </div>
            <div>
                <span>姓名: </span>
                <el-input v-model="usersdata.name" style="width: 240px" placeholder="请输入旧密码" />
            </div>
            <div>
                <span>年龄: </span>
                <el-input v-model="usersdata.age" style="width: 240px" placeholder="请输入旧密码" />
            </div>
            <div>
                <span>性别: </span>
                <el-select v-model="usersdata.xing" placeholder="选择性别" size="large" style="width: 240px">
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </div>
            <div>
                <span>权限: </span>
                <el-select v-model="usersdata.qx" placeholder="选择权限" size="large" style="width: 240px">
                    <el-option label="admin" value="admin" />
                    <el-option label="uadmin" value="uadmin" />
                    <el-option label="user" value="user" />
                </el-select>
            </div>
            <div>
                <span>职位: </span>
                <el-input v-model="usersdata.zw" style="width: 240px" placeholder="请输入职位" />
            </div>
            <div>
                <span>密码: </span>
                <el-input v-model="usersdata.psd" style="width: 240px" disabled placeholder="请输入旧密码" />
            </div>
            <div>
                <span>新密码: </span>
                <el-input v-model="usersdata.newpsd" type="password" style="width: 240px" placeholder="请输入新密码" />
            </div>
            <div>
                <el-button type="warning" style="width: 150px;" @click="cancelClick">确认修改</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup lang='ts'>
import { alluserdata, deluser, updatauser } from '@/api/info/index'
import { ElMessage, ElMessageBox } from 'element-plus'
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
const loading = ref(true)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`
import moment from 'moment';
let tableData = ref();
let cons = ref()
onMounted(() => {


    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    alluserdata({ pageNumber: 1, size: 10 }).then((res: any) => {
        console.log("imgssss", res);
        tableData.value = res.data.data
        cons.value = res.data.conts
        console.log(cons.value);

        setTimeout(() => {
            loading.value = false
        }, 2000);
    })
})

// 分页
const currentPage4 = ref(1)


const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    loading.value = true
    alluserdata({ pageNumber: val, size: 10 }).then((res: any) => {
        tableData.value = res.data.data
        cons.value = res.data.conts
        setTimeout(() => {
            loading.value = false
        }, 2000);
    })

}
// 编辑删除
let usersdata: any = reactive({
    id: "",
    name: "",
    age: "",
    xing: "",
    psd: "",
    newpsd: "",
    zw: "",
    qx: "",
    uu: true
})
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    usersdata.id = row.id
    usersdata.name = row.name
    usersdata.age = row.age
    usersdata.xing = row.xing
    usersdata.qx = row.qx
    usersdata.psd = row.password
    usersdata.zw = row.info
    drawer.value = true
}
const handleDelete = (index: number, row: any) => {
    console.log(index, row)
    deluser({ id: row.id }).then(res => {
        console.log(res);
        if (res.data) {
            open2(res.data)
        } else {
            open4(res.data)
        }
        alluserdata({ pageNumber: currentPage4.value, size: 10 }).then((res: any) => {
            tableData.value = res.data.data
            cons.value = res.data.conts
            setTimeout(() => {
                loading.value = false
            }, 2000);
        })

    })
}
// 抽屉
const drawer = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定取消修改？')
        .then(() => {
            done()
            usersdata.newpsd = ""
        })
        .catch(() => {
            // catch error
        })
}
function cancelClick() {
    for (const key in usersdata) {
        if (usersdata[key] == "") {
            open4("请正确输入信息(检查是否有未填项)")
            return
        }
    }
    updatauser(usersdata).then(res => {
        console.log("upppppppsssdddd", res);
        alluserdata({ pageNumber: currentPage4.value, size: 10 }).then((res: any) => {
            tableData.value = res.data.data
            cons.value = res.data.conts
            setTimeout(() => {
                loading.value = false
            }, 2000);
        })
        if (res.data.message) {
            open2(res.data.message)
            drawer.value = false
            usersdata.newpsd = ""
        } else {
            open4(res.data.error)
            drawer.value = false
            usersdata.newpsd = ""
        }
    })
}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;
        }
    }
}
</style>